<template>
  <div class="box">
    <div class="box1">
      <h2>用户登录</h2>
      <el-form class="box3" ref="form" :model="form" label-width="80px">
        <el-form-item>
          <el-input type="text" placeholder="账号" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="password" placeholder="密码" v-model="form.pass"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn" @click="login">登陆</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: "",
        pass: "",
      },
    };
  },
  methods: {
    login() {
      this.$axios
        .post("http://ceshi5.dishait.cn/admin/login", {
          username: this.form.name,
          password: this.form.pass,
        })
        .then((res) => {
          localStorage.setItem("token", res.data.data.token);
          this.$router.push({ path: "/jichu" });
        })
        .catch((res) => {
          alert("密码错误");
        });
    },
  },
};
</script>
<style  scoped>
.box {
  width: 1480px;
  margin: 0 auto;
  padding-top: 1px;
  float: left;
  margin-top: -66px;
}
.box1 {
  width: 600px;
  height:400px;
  margin: 0 auto;
  margin-top: 200px;
  background: rgb(6, 255, 147);
}
.box3 {
  width: 500px;
}
h2 {
  text-align: center;
}
.btn{
  margin-left: -350px;
  margin-top: 20px;
}
</style>